<template>
<div class="md:flex">
    <Card
        size="small"
        :loading="loading"
        :title="readCrad.title"
        class="md:w-1/4 w-full !md:mt-0 !mt-4"
        :canExpan="false"
    >
        <template #header>
            <Tag :color="readCrad.color">{{ readCrad.action }}</Tag>
        </template>

        <div class="py-4 px-4 flex justify-between">
          <el-statistic :value="readCradOutputValue" />
          <el-icon :icon="readCrad.icon" :size="40"></el-icon>
        </div>

        <div class="p-2 px-4 flex justify-between">
            <span>总{{ readCrad.title }}</span>
            <el-statistic :value="readCrad.total" />
        </div>
    </Card>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { ElCard as Card } from 'element-plus';
import { useTransition } from '@vueuse/core';

defineProps({
    loading: {
    type: Boolean,
    },
});

const readCrad = reactive({
    title: '阅读数',
    icon: 'visit-count|svg',
    total: 0,
    color: 'green',
    action: '月',
})
const readCradValue = ref(0)
const readCradOutputValue = useTransition(readCradValue, {
  duration: 800,
})
readCradValue.value = 172000
</script>
